<script setup>
import { ref } from 'vue'

const activeName = ref('first')

import TabPage4 from "@/views/frontend/tab/TabPage4.vue";
import TabPage5 from "@/views/frontend/tab/TabPage5.vue";
import TabPage3 from "@/views/frontend/tab/TabPage3.vue";
import TabPage1 from "@/views/frontend/tab/TabPage1.vue";
import TabPage2 from "@/views/frontend/tab/TabPage2.vue";
import SideRight from "@/views/frontend/side/SideRight.vue";
</script>

<template>
  <el-container>
    <el-aside width="75%" class="sticky-aside">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="推荐" name="first">
          <TabPage1></TabPage1>
        </el-tab-pane>
        <el-tab-pane label="分类" name="2">
          <TabPage2></TabPage2>
        </el-tab-pane>
        <el-tab-pane label="热门" name="3">
          <TabPage3></TabPage3>
        </el-tab-pane>
        <el-tab-pane label="最新" name="4">
          <TabPage4></TabPage4>
        </el-tab-pane>
        <el-tab-pane label="收藏" name="5">
          <TabPage5></TabPage5>
        </el-tab-pane>
      </el-tabs>
    </el-aside>
    <el-main class="sticky-main">
      <SideRight></SideRight>
    </el-main>
  </el-container>

</template>

<style scoped>
.sticky-aside {
  position: sticky;
  top: 0; /* 固定在顶部 */
  overflow-y: auto; /* 启用垂直滚动条 */
  max-height: 100vh; /* 设置最大高度为视口高度 */
}

.sticky-main {
  position: sticky;
  top: 0; /* 固定在顶部 */
  overflow-y: auto; /* 启用垂直滚动条 */
  max-height: 100vh; /* 设置最大高度为视口高度 */
}

/* 隐藏滚动条 */
.sticky-aside::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
.sticky-main::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}
</style>
